<!--
 * @Author: lihaogn
 * @Date: 2023-08-05 15:26:57
 * @LastEditTime: 2023-08-05 17:17:17
 * @LastEditor: lihaogn
 * @Description: 
 * @FilePath: \lix-css-demo\瀑布流布局\CSS实现瀑布流.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流布局-CSS实现</title>
  <style>
    .wrapper {
      column-count: 3;
      column-gap: 20px;
      width: 80%;
      margin: 0 auto;
    }

    .item {
      margin-bottom: 24px;
      /*防止断点*/
      break-inside: avoid;
      background: #ccc;
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="wrapper">
    <div class="item" style="height: 100px;">1</div>
    <div class="item" style="height: 200px;">2</div>
    <div class="item" style="height: 200px;">3</div>
    <div class="item" style="height: 100px;">4</div>
    <div class="item" style="height: 300px;">5</div>
    <div class="item" style="height: 100px;">6</div>

    <!-- CSS实现的这种方式，排列是先从上往下排，然后从左到右排，不符合动态加载的需求 -->
  </div>

</body>

</html>